<template>
  <RouterLink to="/navigation-guard/aaa">导航守卫A</RouterLink>
  <RouterLink to="/navigation-guard/bbb">导航守卫B</RouterLink>
  <RouterLink to="/alias-avoid-reuse">避免同一组件复用</RouterLink>

  <button @click="navigationFailure">导航故障</button>

  <RouterView/>
</template>

<script>

import {defineComponent} from 'vue';
import {isNavigationFailure, NavigationFailureType} from 'vue-router';

export default defineComponent({
  methods: {
    async navigationFailure() {
      const navigationRes = await this.$router.push('/navigation-failure');
      if (navigationRes) {
        console.log('导航被阻止(无第二参数)', isNavigationFailure(navigationRes));
        console.log('导航守卫中返回false中断此次导航(aborted)', isNavigationFailure(navigationRes, NavigationFailureType.aborted));
        console.log('此次导航完成前由有新的导航导致此次导航被中断(cancelled)', isNavigationFailure(navigationRes, NavigationFailureType.cancelled));
        console.log('已经处于导航目标位置导致导航被阻止(duplicated)', isNavigationFailure(navigationRes, NavigationFailureType.duplicated));

        // 全局后置守卫router.afterEach的第三参数failure可监测全局导航故障

        // 导航失败一般会在navigationRes中暴露to和from属性，反映失败导航的当前位置和目标位置

        // 重定向不会阻止导航，而是创建新的导航并覆盖正在运行的导航，可通过$router.currentRoute.value.redirectedFrom对象对重定向进行检查
      } else {
        console.log('导航成功');
      }
    }
  }
});
</script>

<style scoped>
a {
  margin-right: 10px;
}
</style>
